<template>
	<view class="outside">
		<view class="outside-item">
				<view class="title">
					手机号
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入手机号" v-model="formData.mobile"/>
				</view>
		</view>
		<view class="outside-item">
				<view class="title">
					微信
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入微信号" v-model="formData.wechat"/>
				</view>
		</view>
		<view class="outside-item">
				<view class="title">
					QQ
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入QQ号" v-model="formData.qq"/>
				</view>
		</view>
		<view class="outside-item">
				<view class="title">
					邮箱
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入邮箱号" v-model="formData.email"/>
				</view>
		</view>
		<view class="outside-item">
				<view class="title">
					抖音
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入抖音号" v-model="formData.tiktok"/>
				</view>
		</view>
		<view class="outside-item">
				<view class="title">
					小红书
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入小红书ID" v-model="formData.red_book"/>
				</view>
		</view>
		<view class="edit-info-btn" @click="save">
			保存
		</view>
	</view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app'
import { reactive, ref } from 'vue';
import {throttle} from '@/utils/utils.js'
import {useUserStore} from '@/store/modules/user.js'
const userstore = useUserStore()
const formData = reactive({
	mobile:'',
	wechat:'',
	qq:'',
	email:'',
	tiktok:'',
	red_book:''
})
	onLoad(()=>{
		getOutSideInfo()
	})
	// 保存
	const save =throttle(async()=>{
		let res = await userstore.emitOutSideInfo(formData)
		if(res.code==200){
			uni.$uv.toast('修改成功')
			uni.navigateBack()
		}
	},200)
	 const getOutSideInfo = async()=>{
		 let res = await userstore.getOutSideInfo()
		 if(res.code==200){
			 formData.mobile = res.data.mobile.content
			 formData.email = res.data.email.content
			 formData.qq = res.data.qq.content
			 formData.red_book = res.data.red_book.content
			 formData.tiktok = res.data.tiktok.content
			 formData.wechat = res.data.wechat.content
		 }
	 }
</script>

<style lang="scss" scoped>
	.outside{
		padding: 30rpx;
		.outside-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			width: 690rpx;
			height: 112rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.outside-info{
				display: flex;
				justify-content: space-between;
				.title{
					width: 100rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}
				.info{
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}

			}
			.not-set{
				text-align: right;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				input{
					text-align: right;
					font-size: 28rpx;
				}
			}
		}
		.edit-info-btn{
			position: fixed;
			bottom: 30rpx;
			width: 690rpx;
			height: 100rpx;
			background: #FE3052;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>